<template>
  <div class="introduce" >

    <span>作品介绍</span>
    <div class="text" v-loading="loading" element-loading-text="Loading..." element-loading-background="rgb(255,255,255,0.95)">
      <div class="richtext" v-html="richText"></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

const loading = ref(true)
const data = ref()
const richText = ref('');
const getData = () => {
  
  if(sessionStorage.getItem('workDetail') == 'undefined' || !sessionStorage.getItem('workDetail')) {
    return
  }
  data.value = JSON.parse(sessionStorage.getItem('workDetail'))
  
  richText.value = data.value.workDescription
  loading.value = false
}

setTimeout(() => {
  getData()
}, 1000);

</script>

<style lang="scss" scoped>
.introduce {
  width: 100%;
  height: 100%px;
  line-height: 30px;

  // margin: 40px auto;
  // }
  .rich-text {
    // box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;

    :deep(*) {
      width: inherit;
    }
  }

  .text {
    width: 100%;
    min-height: 155px;
    // margin: 50px auto;
    background-color: rgb(255, 255, 255);
    padding: 20px;

    // border-radius: 10px;
    // box-shadow: -2px 2px 10px #888888;
    :deep(*) {
      width: inherit;
    }

    p {
      text-indent: 2em;
    }
  }

  span {
    font-size: 24px;
    font-weight: bolder;
    margin-bottom: 10px;
  }

  .video {
    margin-top: 10px;

    video {
      margin: 20px auto;
      width: 100%;
      height: 300px;
    }
  }


}</style>